<template>
    <div>
        <div class="banner slidedown" :style="{ 'background-image': `url(${article.articleCover})` }">
            <div class="banner-content">
                <div class="post-title">
                    {{ article.articleTitle }}
                </div>
                <div class="post-intro1">
                    <i class="iconfont icon-rili"></i>
                    <span>发表于 {{ article.publishTime }}</span>
                    <span class="verticle-line">|</span>
                    <i class="iconfont icon-gengxinshijian"></i>
                    <span>更新于 {{ article.updateTime }}</span>
                    <span class="verticle-line">|</span>
                    <i class="iconfont icon-fenlei"></i>
                    <span>分类 {{ article.categoryDTO.categoryName }}</span>
                </div>
                <!-- <div class="post-intro2">
                    <i class="iconfont icon-wenben"></i>
                    <span>字数统计: 2.4k</span>
                    <span class="verticle-line">|</span>
                    <i class="iconfont icon-shichang"></i>
                    <span>阅读时长: 6分钟</span>
                    <span class="verticle-line">|</span>
                    <i class="iconfont icon-liulan-2"></i>
                    <span>阅读量: 79</span>
                    <span class="verticle-line">|</span>
                    <i class="iconfont icon-wodepinglun"></i>
                    <span>评论数: 1</span>
                </div> -->
            </div>
        </div>
        <div class="post-wrapper slideup">
            <div class="post-content-wrapper">
                <div class="post-content">
                    <div v-html="htmlContent" id="article-content" class="article-content"></div>

                    <hr style="border: 0;border-bottom: 3px dashed #d7d7d7;margin: 50px 0;" />

                    <!-- 文章评论 -->
                    <Comment :topicId="parseInt($route.params.articleId)" />
                </div>


            </div>
            <div class="post-sider-wrapper">
                <div class="post-sider">
                    <div class="toc-wrapper scaleup">
                        <div class="toc-header">
                            <span>
                                <i class="iconfont icon-menu2 mr5" style="font-size: 14px;"></i>
                                <span>目录</span>
                            </span>
                            <el-switch v-model="tocCollapse" active-color="#13ce66" class="scale-down"
                                inactive-color="#ddd">
                            </el-switch>
                        </div>
                        <div id="toc-content" :class="{ 'toc-collapse': tocCollapse }"></div>
                    </div>

                    <div class="latest-article scaleup">
                        <div class="latest-article-header">
                            <i class="iconfont icon-gengxinshijian"></i>
                            <span>最新文章</span>
                        </div>
                        <template v-if="article.articleLatestDTOList.length > 0">
                            <router-link :to="`/post/${articleLatestDTO.articleId}`" class="latest-article-item"
                                v-for="articleLatestDTO in article.articleLatestDTOList" :key="articleLatestDTO.articleId">
                                <div class="latest-post-cover">
                                    <img :src="articleLatestDTO.articleCover" alt="">
                                </div>
                                <div class="latest-post-info">
                                    <div class="latest-post-title">
                                        {{ articleLatestDTO.articleTitle }}
                                    </div>
                                    <div class="latest-post-desc">
                                        {{ articleLatestDTO.publishTime }}
                                    </div>
                                </div>
                            </router-link>
                        </template>
                        <template v-else>
                            <div style="color:#ccc;text-align: center;color: rgb(82 82 82);text-align: center;">
                                什么? 你其它都没点写吗?
                            </div>
                        </template>

                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

import { getArticleDetail } from '@/api/postApi'

import md from '@/utils/markdown.js'

import ClipboardJS from 'clipboard'

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import tocbot from 'tocbot'

import Comment from './Comment/Comment.vue'

export default {
    name: 'Post',
    components: {
        Comment
    },
    data() {
        return {
            mdContent: '',
            htmlContent: '',
            tocCollapse: false,
            article: {
                categoryDTO: {},
                articleLatestDTOList: []
            },
            wordNum: '',
            readTime: '',
            imgArr: []
        }
    },
    mounted() {
        this.getArticleInfo()
    },
    destroyed() {
        console.log('销毁。。。');
    },
    methods: {
        getArticleInfo() {
            getArticleDetail({ articleId: this.$route.params.articleId }).then(data => {
                this.mdContent = data.mdContent
                this.article = data

            })
        }
    },
    watch: {
        mdContent(newVal, oldVal) {
            let _this = this
            this.htmlContent = md.render(newVal)

            this.wordNum = this.htmlContent.replace(/<\/?[^>]*>/g, '').length
            console.log(this.wordNum, this.htmlContent.length, 1);

            this.$nextTick(() => {
                var clipboard = new ClipboardJS('.copy-btn');


                clipboard.on('success', function (e) {
                    console.info('Action:', e.action);
                    console.info('Text:', e.text);
                    console.info('Trigger:', e.trigger);

                    _this.$toast('success', '复制成功了哦');
                    e.clearSelection();
                });

                clipboard.on('error', function (e) {
                    console.error('Action:', e.action);
                    console.error('Trigger:', e.trigger);
                });

                // console.log('$nextTick...');
                let articleContent = document.querySelector('#article-content')
                let headingTag = ['h1', 'h2', 'h3']
                let children = Array.from(articleContent.children)
                for (let i = 0; i < children.length; i++) {
                    const e = children[i];
                    e.id = `h-${i}`
                }

                hljs.highlightAll()

                tocbot.init({
                    // Where to render the table of contents.
                    tocSelector: '#toc-content',
                    // Where to grab the headings to build the table of contents.
                    contentSelector: '#article-content',
                    // Which headings to grab inside of the contentSelector element.
                    headingSelector: 'h1, h2, h3, h4, h5, h6',
                    // For headings inside relative or absolute positioned containers within content.
                    hasInnerContainers: true,
                });

                /*  this.$nextTick(() => {
 
                     let scrollTop = document.documentElement.scrollHeight
                     // 自动滚动到最下面
                     window.scroll({
                         top: scrollTop, // top: 表示移动到距离顶部的位置大小
                         behavior: 'smooth'
                     })
                 }) */

                // 获取到所有的图片
                let articleContentDom = document.querySelector('#article-content')
                let imgs = articleContentDom.querySelectorAll('img')
                let _this = this
                let i = 0
                if (imgs.length > 0) {
                    imgs.forEach(img => {
                        if (img.src) {
                            img.dataset['idx'] = i // i从0开始
                            this.imgArr.push(img.src)
                            img.onclick = (e) => {
                                console.log(_this.$prevImg);
                                this.$prevImg.open(0, this.imgArr)
                            }
                            i++
                        }

                    })

                }

            })
        },
        // 监听路由
        $route(newVal, oldVal) {
            this.getArticleInfo()
        }
    }
}
</script>

<style lang="scss">
// @import url(http://fonts.font.im/css?family=Lato:400,700,300);
// @import url('https://fonts.font.im/css?family=Lato|Open+Sans|Raleway|Source+Sans+Pro');
// @import url('https://fonts.font.im/css?family=Lato|Open+Sans|Raleway|Source+Sans+Pro');

@import 'tocbot/src/scss/tocbot';

* {
    font-family: 'Lato', 'Microsoft YaHei', sans-serif !important;
    outline: none;
}

blockquote {
    background-color: #b4f0eb;
    padding: 12px 0 12px 8px;
    border-left: 5px solid #00c4b6;
    border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 10px;
}

p {
    line-height: 1.45;
}

.article-content ul li {
    list-style: disc;
}

.article-content ol li {
    list-style: decimal;
}

.contains-task-list li {
    list-style: none !important;
}

.article-content {
    line-height: 1.5;

    p {
        margin: 5px 0;
    }

    hr {
        border: 0;
        border-top: 1px solid #eaecef;
    }

    table {
        margin: 10px 2px;
        border-collapse: collapse;
        border: none;

        th,
        td {
            padding: 10px 15px;
            border: 1px solid #dfe2e5;
        }
    }
}

pre code {
    line-height: 1.55;
    margin: 8px 0;
}

.toc-collapse .is-collapsed {
    max-height: fit-content;
}

.scale-down {
    transform: scale(0.6);
}

.article-content a {
    color: #48c78e;
    // border-bottom: 1px dashed #ddd;
    // padding: 2px;
    margin: 0 3px;

    &::after {
        content: '\e60b;';
        font-family: 'iconfont';
        color: #aaa;
    }

    &:hover {
        border-bottom: 2px dotted #a8aba9;
    }
}

.article-content img {
    margin: 10px 0;
    border-radius: 4px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 30px 0 15px;
}

.article-content h1,
.article-content h2 {
    border-bottom: 1px solid #d8dee4;
    padding-bottom: 5px;
}

.article-content h1 {
    font-size: 24px;
    font-weight: 600;
}

.article-content h2 {
    font-size: 20px;
    font-weight: 400;
}

.article-content h3 {
    font-size: 18px;
    font-weight: 400;
}

#article-content img {
    max-width: 100%;
}

/* 行号样式 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 18px;
    font-size: 100%;
    left: 0.5em;
    width: 2.1em;
    letter-spacing: -1px;
    border-right: 1px solid #0e0f12;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #282c34;
    line-height: 1.55;
}

.line-numbers-rows b.language-name {
    display: none;
}

pre {
    position: relative;
    padding-left: 2.6em;
    line-height: 1.3em;
}

.line-numbers-rows>span {
    display: block;
    counter-increment: linenumber;
}

pre {
    background-color: #282c34;
    border-radius: 8px;
}

pre code {
    border-radius: 8px;
}

.line-numbers-rows>span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

.language-name {
    position: absolute;
    top: 9px;
    color: #999999;
    right: 43px;
    font-size: 0.8em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.copy-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: #525252;
    border: none;
    padding: 3px 6px;
    border-radius: 3px;
    color: #cccccc;
    cursor: pointer;
    display: none;
}

pre:hover .copy-btn {
    display: block;
}

.copy-textarea {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* 封面图下移效果 */
@keyframes slidedown {
    0% {
        opacity: 0.3;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slidedown {
    animation: slidedown 1s;
}

/* 内容上移效果 */
@keyframes slideup {
    0% {
        opacity: 0.3;
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slideup {
    animation: slideup 1s;
}

/* 从小变大效果 */
@keyframes scaleup {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(1);
    }
}

.scaleup {
    animation: scaleup 1s;
}

body {
    overflow-x: hidden;
    overflow-y: scroll;
    /* 背景渐变 */
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
}

.verticle-line {
    margin: 10px;
}

* {
    box-sizing: border-box;
}

.toc-link {
    text-overflow: ellipsis;
    white-space: nowrap;
    /* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */
    overflow: hidden;
}

.banner {
    height: 400px;
    // background-image: url(@/assets/img/bg/post-bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    color: #eee;

    .banner-content {
        position: absolute;
        bottom: 25%;
        width: 100%;
        text-align: center;
        text-shadow: 0.05rem 0.05rem 0.1rem rgb(0 0 0 / 30%);

        .post-title {
            font-size: 30px;
            margin-bottom: 20px;
        }

        .post-intro1,
        .post-intro2 {
            font-size: 14px;
            line-height: 1.5;

            i {
                margin-right: 5px;
            }
        }
    }
}

.post-wrapper {
    display: flex;
    // border: 1px solid red;
    max-width: 1200px;
    margin: 40px auto;
    padding-bottom: 40px;

    .post-content-wrapper {
        // border: 1px solid red;
        width: 75%;
        padding: 10px;

        .post-content {
            padding: 40px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);

        }
    }

    .post-sider-wrapper {
        // border: 1px solid red;
        padding: 7.5px;
        width: 25%;
        padding: 12px;



        .post-sider {
            border-radius: 10px;
            position: sticky;
            top: 20px;

            .toc-wrapper {

                flex-basis: 25%;
                box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
                padding: 20px;
                border-radius: 10px;
                margin-bottom: 15px;
                background-color: #fff;

                // border: 1px solid red;


                .toc-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 8px 0;
                }

                #toc-content {
                    position: sticky;
                    top: 20px;
                    box-sizing: border-box;
                    // border: 1px solid red;

                    a {
                        transition: all 0.3s;
                        text-decoration: none;
                        display: block;
                        line-height: 1.6em;
                        padding-left: 10px;
                        border-left: 4px solid transparent;
                        color: #666261;

                        &::before {
                            display: none;
                        }

                        &.is-active-link {
                            font-weight: normal;
                            color: #fff;
                            background-color: #00c4b6;
                            border-left-color: #009d92;
                        }
                    }
                }
            }

            .latest-article {
                background-color: #fff;
                // border: 1px solid red;
                border-radius: 10px;
                padding: 20px;

                box-shadow: 0 4px 8px 6px rgb(7 17 27 / 6%);
                ;

                .latest-article-header {
                    margin-right: 5px;
                    margin-bottom: 8px;
                    color: #555555;

                    i {
                        font-weight: bold;
                        margin-right: 8px;
                    }
                }

                .latest-article-item {
                    display: flex;
                    margin-bottom: 10px;

                    border-bottom: 1px solid #e3e3e3;
                    padding-bottom: 6px;

                    &:last-child {
                        border-bottom: none;
                        padding-bottom: 0px;
                    }

                    .latest-post-cover {
                        width: 60px;
                        height: 60px;
                        flex-shrink: 0;
                        border-radius: 5px;
                        overflow: hidden;

                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                            transition: all 0.3s;

                            &:hover {
                                transform: scale(1.2);
                            }
                        }
                    }

                    .latest-post-info {
                        margin-left: 10px;
                        overflow: hidden;
                        flex: 1;
                        padding-top: 3px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        line-height: 1.2;

                        .latest-post-title {
                            color: #53504f;
                            display: -webkit-box;
                            word-break: break-all;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            font-size: 16px;

                            &:hover {
                                color: #00c4b6;
                            }
                        }

                        .latest-post-desc {
                            color: #989898;
                            font-size: 13px;
                        }
                    }
                }
            }

        }


    }
}

#article-content pre {
    padding-right: 10px;
    padding-bottom: 6px;
    margin: 10px 0;
}

#article-content code {
    margin: 0;
}

#article-content code {


    &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    &::-webkit-scrollbar-track {
        background-color: #1e1e1e;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #666666;
        background-image: none;
        border-radius: 3px;
    }


}
</style>